<template>
  <div class="statistics">
    <!-- 页面头部 -->
    <div class="page-header">
      <div class="header-content">
        <h1 class="page-title">数据统计</h1>
        <p class="page-subtitle">查看活动数据分析和统计报告</p>
      </div>
      <div class="header-actions">
        <el-date-picker
          v-model="dateRange"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="YYYY-MM-DD"
          value-format="YYYY-MM-DD"
          @change="loadAllData"
        />
        <el-button @click="exportReport">
          <el-icon><Download /></el-icon>
          导出报告
        </el-button>
      </div>
    </div>

    <!-- 概览统计 -->
    <el-row :gutter="20" class="overview-row">
      <el-col :xs="12" :sm="6">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-content">
            <div class="overview-info">
              <div class="overview-number">{{ overview.totalActivities }}</div>
              <div class="overview-label">总活动数</div>
              <div class="overview-trend">
                <span :class="['trend-value', overview.activitiesTrend >= 0 ? 'positive' : 'negative']">
                  {{ overview.activitiesTrend >= 0 ? '+' : '' }}{{ overview.activitiesTrend }}%
                </span>
                <span class="trend-text">较上期</span>
              </div>
            </div>
            <el-icon class="overview-icon"><Calendar /></el-icon>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="6">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-content">
            <div class="overview-info">
              <div class="overview-number">{{ overview.totalRegistrations }}</div>
              <div class="overview-label">总报名数</div>
              <div class="overview-trend">
                <span :class="['trend-value', overview.registrationsTrend >= 0 ? 'positive' : 'negative']">
                  {{ overview.registrationsTrend >= 0 ? '+' : '' }}{{ overview.registrationsTrend }}%
                </span>
                <span class="trend-text">较上期</span>
              </div>
            </div>
            <el-icon class="overview-icon registrations"><Tickets /></el-icon>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="6">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-content">
            <div class="overview-info">
              <div class="overview-number">{{ overview.totalParticipants }}</div>
              <div class="overview-label">总参与人数</div>
              <div class="overview-trend">
                <span :class="['trend-value', overview.participantsTrend >= 0 ? 'positive' : 'negative']">
                  {{ overview.participantsTrend >= 0 ? '+' : '' }}{{ overview.participantsTrend }}%
                </span>
                <span class="trend-text">较上期</span>
              </div>
            </div>
            <el-icon class="overview-icon participants"><User /></el-icon>
          </div>
        </el-card>
      </el-col>
      
      <el-col :xs="12" :sm="6">
        <el-card class="overview-card" shadow="hover">
          <div class="overview-content">
            <div class="overview-info">
              <div class="overview-number">{{ overview.averageRating.toFixed(1) }}</div>
              <div class="overview-label">平均评分</div>
              <div class="overview-trend">
                <span :class="['trend-value', overview.ratingTrend >= 0 ? 'positive' : 'negative']">
                  {{ overview.ratingTrend >= 0 ? '+' : '' }}{{ overview.ratingTrend.toFixed(1) }}
                </span>
                <span class="trend-text">较上期</span>
              </div>
            </div>
            <el-icon class="overview-icon rating"><Star /></el-icon>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <!-- 左侧图表区域 -->
      <el-col :xs="24" :lg="16">
        <!-- 活动趋势图 -->
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <div class="header-title">
                <el-icon><TrendCharts /></el-icon>
                <span>活动趋势分析</span>
              </div>
              <el-radio-group v-model="trendPeriod" size="small" @change="loadTrendData">
                <el-radio-button label="week">最近7天</el-radio-button>
                <el-radio-button label="month">最近30天</el-radio-button>
                <el-radio-button label="quarter">最近3个月</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          
          <div class="chart-container">
            <div v-if="loadingTrend" class="loading-container">
              <el-skeleton :rows="4" animated />
            </div>
            <div v-else class="trend-chart">
              <!-- 这里可以集成图表库如 ECharts -->
              <div class="chart-mock">
                <div class="chart-title">活动创建与报名趋势</div>
                <div class="chart-legend">
                  <div class="legend-item">
                    <div class="legend-color activities"></div>
                    <span>活动创建</span>
                  </div>
                  <div class="legend-item">
                    <div class="legend-color registrations"></div>
                    <span>报名数量</span>
                  </div>
                </div>
                <div class="chart-content">
                  <div class="chart-bars">
                    <div 
                      v-for="(item, index) in trendData" 
                      :key="index"
                      class="bar-group"
                    >
                      <div class="bar activities" :style="{ height: `${item.activities * 3}px` }">
                        <div class="bar-value">{{ item.activities }}</div>
                      </div>
                      <div class="bar registrations" :style="{ height: `${item.registrations * 2}px` }">
                        <div class="bar-value">{{ item.registrations }}</div>
                      </div>
                    </div>
                  </div>
                  <div class="chart-labels">
                    <span v-for="(item, index) in trendData" :key="index" class="chart-label">
                      {{ item.label }}
                    </span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        
        <!-- 活动类型分布 -->
        <el-card class="chart-card">
          <template #header>
            <div class="header-title">
              <el-icon><PieChart /></el-icon>
              <span>活动类型分布</span>
            </div>
          </template>
          
          <div class="chart-container">
            <div v-if="loadingTypeDistribution" class="loading-container">
              <el-skeleton :rows="3" animated />
            </div>
            <div v-else class="type-distribution">
              <div class="distribution-chart">
                <div class="pie-chart-mock">
                  <div 
                    v-for="(item, index) in typeDistribution" 
                    :key="index"
                    class="pie-segment"
                    :style="{ 
                      '--percentage': item.percentage,
                      '--color': getTypeColor(index)
                    }"
                  >
                    <div class="segment-label">
                      <span class="segment-name">{{ item.name }}</span>
                      <span class="segment-value">{{ item.count }}</span>
                      <span class="segment-percentage">{{ item.percentage }}%</span>
                    </div>
                  </div>
                </div>
              </div>
              <div class="distribution-legend">
                <div 
                  v-for="(item, index) in typeDistribution" 
                  :key="index"
                  class="legend-item"
                >
                  <div class="legend-color" :style="{ backgroundColor: getTypeColor(index) }"></div>
                  <span class="legend-text">{{ item.name }}</span>
                  <span class="legend-count">{{ item.count }}</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
      
      <!-- 右侧统计区域 -->
      <el-col :xs="24" :lg="8">
        <!-- 热门活动排行 -->
        <el-card class="ranking-card">
          <template #header>
            <div class="header-title">
              <el-icon><Trophy /></el-icon>
              <span>热门活动排行</span>
            </div>
          </template>
          
          <div v-if="loadingRanking" class="loading-container">
            <el-skeleton :rows="3" animated />
          </div>
          
          <div v-else-if="popularActivities.length === 0" class="empty-container">
            <el-empty description="暂无数据" :image-size="60" />
          </div>
          
          <div v-else class="ranking-list">
            <div 
              v-for="(activity, index) in popularActivities" 
              :key="activity.id"
              class="ranking-item"
            >
              <div class="ranking-number" :class="`rank-${index + 1}`">
                {{ index + 1 }}
              </div>
              <div class="ranking-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-stats">
                  <span class="stat-item">
                    <el-icon><User /></el-icon>
                    {{ activity.participantCount }}人
                  </span>
                  <span class="stat-item">
                    <el-icon><Star /></el-icon>
                    {{ activity.averageRating.toFixed(1) }}
                  </span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
        
        <!-- 报名状态统计 -->
        <el-card class="status-card">
          <template #header>
            <div class="header-title">
              <el-icon><DataAnalysis /></el-icon>
              <span>报名状态统计</span>
            </div>
          </template>
          
          <div v-if="loadingStatus" class="loading-container">
            <el-skeleton :rows="2" animated />
          </div>
          
          <div v-else class="status-stats">
            <div class="status-item">
              <div class="status-info">
                <div class="status-label">待审核</div>
                <div class="status-number">{{ registrationStatus.pending }}</div>
              </div>
              <div class="status-progress">
                <el-progress 
                  :percentage="getStatusPercentage('pending')" 
                  :show-text="false"
                  color="#e6a23c"
                />
              </div>
            </div>
            
            <div class="status-item">
              <div class="status-info">
                <div class="status-label">已通过</div>
                <div class="status-number">{{ registrationStatus.approved }}</div>
              </div>
              <div class="status-progress">
                <el-progress 
                  :percentage="getStatusPercentage('approved')" 
                  :show-text="false"
                  color="#67c23a"
                />
              </div>
            </div>
            
            <div class="status-item">
              <div class="status-info">
                <div class="status-label">已拒绝</div>
                <div class="status-number">{{ registrationStatus.rejected }}</div>
              </div>
              <div class="status-progress">
                <el-progress 
                  :percentage="getStatusPercentage('rejected')" 
                  :show-text="false"
                  color="#f56c6c"
                />
              </div>
            </div>
            
            <div class="status-item">
              <div class="status-info">
                <div class="status-label">已取消</div>
                <div class="status-number">{{ registrationStatus.cancelled }}</div>
              </div>
              <div class="status-progress">
                <el-progress 
                  :percentage="getStatusPercentage('cancelled')" 
                  :show-text="false"
                  color="#909399"
                />
              </div>
            </div>
          </div>
        </el-card>
        
        <!-- 反馈评分分布 -->
        <el-card class="rating-card">
          <template #header>
            <div class="header-title">
              <el-icon><Star /></el-icon>
              <span>评分分布</span>
            </div>
          </template>
          
          <div v-if="loadingRating" class="loading-container">
            <el-skeleton :rows="2" animated />
          </div>
          
          <div v-else class="rating-distribution">
            <div 
              v-for="(item, index) in ratingDistribution" 
              :key="index"
              class="rating-item"
            >
              <div class="rating-stars">
                <el-rate
                  :model-value="5 - index"
                  disabled
                  size="small"
                />
              </div>
              <div class="rating-progress">
                <el-progress 
                  :percentage="item.percentage" 
                  :show-text="false"
                  color="#ff9900"
                />
              </div>
              <div class="rating-count">{{ item.count }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 详细数据表格 -->
    <el-card class="table-card">
      <template #header>
        <div class="card-header">
          <div class="header-title">
            <el-icon><Grid /></el-icon>
            <span>活动详细数据</span>
          </div>
          <el-button @click="exportTableData">
            <el-icon><Download /></el-icon>
            导出表格
          </el-button>
        </div>
      </template>
      
      <div v-if="loadingTable" class="loading-container">
        <el-skeleton :rows="5" animated />
      </div>
      
      <div v-else>
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="title" label="活动名称" min-width="200" show-overflow-tooltip />
          
          <el-table-column prop="type" label="类型" width="100">
            <template #default="{ row }">
              <el-tag size="small">{{ getTypeText(row.type) }}</el-tag>
            </template>
          </el-table-column>
          
          <el-table-column prop="startTime" label="开始时间" width="150">
            <template #default="{ row }">
              {{ formatDate(row.startTime, 'MM-DD HH:mm') }}
            </template>
          </el-table-column>
          
          <el-table-column prop="registrationCount" label="报名数" width="80" sortable />
          
          <el-table-column prop="participantCount" label="参与数" width="80" sortable />
          
          <el-table-column prop="approvalRate" label="通过率" width="80" sortable>
            <template #default="{ row }">
              {{ (row.approvalRate * 100).toFixed(1) }}%
            </template>
          </el-table-column>
          
          <el-table-column prop="averageRating" label="平均评分" width="100" sortable>
            <template #default="{ row }">
              <el-rate
                :model-value="row.averageRating"
                disabled
                size="small"
                show-score
                text-color="#ff9900"
              />
            </template>
          </el-table-column>
          
          <el-table-column prop="feedbackCount" label="反馈数" width="80" sortable />
          
          <el-table-column prop="status" label="状态" width="80">
            <template #default="{ row }">
              <el-tag :type="getActivityStatusType(row.status)" size="small">
                {{ getActivityStatusText(row.status) }}
              </el-tag>
            </template>
          </el-table-column>
          
          <el-table-column label="操作" width="120" fixed="right">
            <template #default="{ row }">
              <el-button type="primary" size="small" text @click="viewActivityDetail(row.id)">
                查看详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <!-- 分页 -->
        <div v-if="tableData.length > 0" class="pagination-container">
          <el-pagination
            v-model:current-page="tablePagination.current"
            v-model:page-size="tablePagination.size"
            :total="tablePagination.total"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="loadTableData"
            @current-change="loadTableData"
          />
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { formatDate } from '@/utils'
import { ElMessage } from 'element-plus'
import api from '@/utils/api'
import {
  Download,
  Calendar,
  Tickets,
  User,
  Star,
  TrendCharts,
  PieChart,
  Trophy,
  DataAnalysis,
  Grid
} from '@element-plus/icons-vue'

const router = useRouter()

const dateRange = ref(null)
const trendPeriod = ref('month')

const loadingTrend = ref(false)
const loadingTypeDistribution = ref(false)
const loadingRanking = ref(false)
const loadingStatus = ref(false)
const loadingRating = ref(false)
const loadingTable = ref(false)

const overview = reactive({
  totalActivities: 0,
  totalRegistrations: 0,
  totalParticipants: 0,
  averageRating: 0,
  activitiesTrend: 0,
  registrationsTrend: 0,
  participantsTrend: 0,
  ratingTrend: 0
})

const registrationStatus = reactive({
  pending: 0,
  approved: 0,
  rejected: 0,
  cancelled: 0
})

const tablePagination = reactive({
  current: 1,
  size: 20,
  total: 0
})

const trendData = ref([])
const typeDistribution = ref([])
const popularActivities = ref([])
const ratingDistribution = ref([])
const tableData = ref([])

const typeColors = ['#409eff', '#67c23a', '#e6a23c', '#f56c6c', '#909399', '#c71585']

const getTypeColor = (index) => {
  return typeColors[index % typeColors.length]
}

const getTypeText = (type) => {
  const textMap = {
    lecture: '学术讲座',
    sports: '文体活动',
    club: '社团活动',
    volunteer: '志愿服务',
    practice: '实践活动',
    other: '其他'
  }
  return textMap[type] || type
}

const getActivityStatusType = (status) => {
  const typeMap = {
    draft: 'info',
    published: 'success',
    ongoing: 'warning',
    ended: '',
    cancelled: 'danger'
  }
  return typeMap[status] || ''
}

const getActivityStatusText = (status) => {
  const textMap = {
    draft: '草稿',
    published: '已发布',
    ongoing: '进行中',
    ended: '已结束',
    cancelled: '已取消'
  }
  return textMap[status] || status
}

const getStatusPercentage = (status) => {
  const total = Object.values(registrationStatus).reduce((sum, count) => sum + count, 0)
  return total > 0 ? Math.round((registrationStatus[status] / total) * 100) : 0
}

const loadOverview = async () => {
  try {
    const params = {}
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = dateRange.value[0]
      params.endDate = dateRange.value[1]
    }
    
    const response = await api.get('/api/activities/overview', { params })
    const data = response.data.data
    
    Object.assign(overview, data)
    
  } catch (error) {
    console.error('加载概览数据失败:', error)
  }
}

const loadTrendData = async () => {
  try {
    loadingTrend.value = true
    
    const params = { period: trendPeriod.value }
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = dateRange.value[0]
      params.endDate = dateRange.value[1]
    }
    
    const response = await api.get('/organizer/statistics/trend', { params })
    trendData.value = response.data.data || []
    
    // 模拟数据
    if (trendData.value.length === 0) {
      const labels = trendPeriod.value === 'week' 
        ? ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
        : ['第1周', '第2周', '第3周', '第4周']
      
      trendData.value = labels.map(label => ({
        label,
        activities: Math.floor(Math.random() * 10) + 1,
        registrations: Math.floor(Math.random() * 50) + 10
      }))
    }
    
  } catch (error) {
    console.error('加载趋势数据失败:', error)
  } finally {
    loadingTrend.value = false
  }
}

const loadTypeDistribution = async () => {
  try {
    loadingTypeDistribution.value = true
    
    const params = {}
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = dateRange.value[0]
      params.endDate = dateRange.value[1]
    }
    
    const response = await api.get('/organizer/statistics/type-distribution', { params })
    typeDistribution.value = response.data.data || []
    
    // 模拟数据
    if (typeDistribution.value.length === 0) {
      typeDistribution.value = [
        { name: '学术讲座', count: 15, percentage: 30 },
        { name: '文体活动', count: 12, percentage: 24 },
        { name: '社团活动', count: 10, percentage: 20 },
        { name: '志愿服务', count: 8, percentage: 16 },
        { name: '实践活动', count: 5, percentage: 10 }
      ]
    }
    
  } catch (error) {
    console.error('加载类型分布数据失败:', error)
  } finally {
    loadingTypeDistribution.value = false
  }
}

const loadPopularActivities = async () => {
  try {
    loadingRanking.value = true
    
    const params = { size: 10 }
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = dateRange.value[0]
      params.endDate = dateRange.value[1]
    }
    
    const response = await api.get('/organizer/statistics/popular-activities', { params })
    popularActivities.value = response.data.data || []
    
  } catch (error) {
    console.error('加载热门活动数据失败:', error)
  } finally {
    loadingRanking.value = false
  }
}

const loadRegistrationStatus = async () => {
  try {
    loadingStatus.value = true
    
    const params = {}
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = dateRange.value[0]
      params.endDate = dateRange.value[1]
    }
    
    const response = await api.get('/organizer/statistics/registration-status', { params })
    const data = response.data.data
    
    Object.assign(registrationStatus, data)
    
  } catch (error) {
    console.error('加载报名状态数据失败:', error)
  } finally {
    loadingStatus.value = false
  }
}

const loadRatingDistribution = async () => {
  try {
    loadingRating.value = true
    
    const params = {}
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = dateRange.value[0]
      params.endDate = dateRange.value[1]
    }
    
    const response = await api.get('/organizer/statistics/rating-distribution', { params })
    ratingDistribution.value = response.data.data || []
    
    // 模拟数据
    if (ratingDistribution.value.length === 0) {
      ratingDistribution.value = [
        { rating: 5, count: 45, percentage: 45 },
        { rating: 4, count: 30, percentage: 30 },
        { rating: 3, count: 15, percentage: 15 },
        { rating: 2, count: 7, percentage: 7 },
        { rating: 1, count: 3, percentage: 3 }
      ]
    }
    
  } catch (error) {
    console.error('加载评分分布数据失败:', error)
  } finally {
    loadingRating.value = false
  }
}

const loadTableData = async () => {
  try {
    loadingTable.value = true
    
    const params = {
      page: tablePagination.current - 1,
      size: tablePagination.size
    }
    
    if (dateRange.value && dateRange.value.length === 2) {
      params.startDate = dateRange.value[0]
      params.endDate = dateRange.value[1]
    }
    
    const response = await api.get('/organizer/statistics/activities', { params })
    const data = response.data.data
    
    tableData.value = data.data || []
    tablePagination.total = data.total || 0
    
  } catch (error) {
    console.error('加载表格数据失败:', error)
  } finally {
    loadingTable.value = false
  }
}

const loadAllData = () => {
  loadOverview()
  loadTrendData()
  loadTypeDistribution()
  loadPopularActivities()
  loadRegistrationStatus()
  loadRatingDistribution()
  loadTableData()
}

const viewActivityDetail = (id) => {
  router.push(`/organizer/activities/${id}`)
}

const exportReport = () => {
  ElMessage.info('报告导出功能开发中...')
}

const exportTableData = () => {
  ElMessage.info('表格导出功能开发中...')
}

onMounted(() => {
  // 设置默认日期范围为最近30天
  const endDate = new Date()
  const startDate = new Date()
  startDate.setDate(startDate.getDate() - 30)
  
  dateRange.value = [
    startDate.toISOString().split('T')[0],
    endDate.toISOString().split('T')[0]
  ]
  
  loadAllData()
})
</script>

<style scoped>
.statistics {
  max-width: 1400px;
  margin: 0 auto;
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  padding: 24px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.header-content {
  flex: 1;
}

.page-title {
  font-size: 24px;
  font-weight: 700;
  color: #303133;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #606266;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
  margin-left: 20px;
}

.overview-row {
  margin-bottom: 24px;
}

.overview-card {
  height: 120px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.overview-card:hover {
  transform: translateY(-2px);
}

.overview-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.overview-info {
  flex: 1;
}

.overview-number {
  font-size: 28px;
  font-weight: 700;
  color: #303133;
  margin-bottom: 4px;
}

.overview-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.overview-trend {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
}

.trend-value.positive {
  color: #67c23a;
}

.trend-value.negative {
  color: #f56c6c;
}

.trend-text {
  color: #909399;
}

.overview-icon {
  font-size: 32px;
  opacity: 0.3;
  color: #409eff;
}

.overview-icon.registrations {
  color: #67c23a;
}

.overview-icon.participants {
  color: #e6a23c;
}

.overview-icon.rating {
  color: #f56c6c;
}

.chart-card,
.ranking-card,
.status-card,
.rating-card,
.table-card {
  margin-bottom: 20px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #303133;
}

.chart-container {
  height: 300px;
  padding: 20px 0;
}

.loading-container,
.empty-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
}

.trend-chart,
.chart-mock {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.chart-title {
  text-align: center;
  font-weight: 600;
  color: #303133;
  margin-bottom: 16px;
}

.chart-legend {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #606266;
}

.legend-color {
  width: 12px;
  height: 12px;
  border-radius: 2px;
}

.legend-color.activities {
  background: #409eff;
}

.legend-color.registrations {
  background: #67c23a;
}

.chart-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chart-bars {
  display: flex;
  align-items: end;
  justify-content: space-around;
  height: 180px;
  padding: 0 20px;
}

.bar-group {
  display: flex;
  gap: 4px;
  align-items: end;
}

.bar {
  width: 20px;
  border-radius: 2px 2px 0 0;
  position: relative;
  min-height: 10px;
  display: flex;
  align-items: end;
  justify-content: center;
}

.bar.activities {
  background: linear-gradient(to top, #409eff, #79bbff);
}

.bar.registrations {
  background: linear-gradient(to top, #67c23a, #95d475);
}

.bar-value {
  position: absolute;
  top: -16px;
  font-size: 10px;
  color: #606266;
  font-weight: 600;
}

.chart-labels {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px 0;
}

.chart-label {
  font-size: 12px;
  color: #909399;
}

.type-distribution {
  display: flex;
  gap: 40px;
  align-items: center;
  height: 260px;
}

.distribution-chart {
  flex: 1;
  display: flex;
  justify-content: center;
}

.pie-chart-mock {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: conic-gradient(
    #409eff 0% 30%,
    #67c23a 30% 54%,
    #e6a23c 54% 74%,
    #f56c6c 74% 90%,
    #909399 90% 100%
  );
  position: relative;
}

.distribution-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-text {
  flex: 1;
  font-size: 14px;
  color: #303133;
}

.legend-count {
  font-weight: 600;
  color: #606266;
}

.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.ranking-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: 6px;
  background: #f8f9fa;
}

.ranking-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 12px;
  color: white;
}

.ranking-number.rank-1 {
  background: #ffd700;
}

.ranking-number.rank-2 {
  background: #c0c0c0;
}

.ranking-number.rank-3 {
  background: #cd7f32;
}

.ranking-number:not(.rank-1):not(.rank-2):not(.rank-3) {
  background: #909399;
}

.ranking-content {
  flex: 1;
}

.activity-title {
  font-weight: 600;
  color: #303133;
  margin-bottom: 4px;
  font-size: 14px;
}

.activity-stats {
  display: flex;
  gap: 12px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #606266;
}

.status-stats {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.status-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.status-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-label {
  font-size: 14px;
  color: #606266;
}

.status-number {
  font-weight: 600;
  color: #303133;
}

.rating-distribution {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rating-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.rating-stars {
  width: 100px;
}

.rating-progress {
  flex: 1;
}

.rating-count {
  width: 30px;
  text-align: right;
  font-size: 12px;
  color: #606266;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e4e7ed;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }
  
  .header-actions {
    margin-left: 0;
    flex-direction: column;
  }
  
  .overview-trend {
    flex-direction: column;
    gap: 2px;
  }
  
  .chart-legend {
    flex-direction: column;
    gap: 8px;
  }
  
  .type-distribution {
    flex-direction: column;
    gap: 20px;
    height: auto;
  }
  
  .distribution-chart {
    order: 2;
  }
  
  .distribution-legend {
    order: 1;
  }
  
  .chart-bars {
    padding: 0 10px;
  }
  
  .bar {
    width: 16px;
  }
  
  .activity-stats {
    flex-direction: column;
    gap: 4px;
  }
}
</style>